<template>
    <view>
        <u-navbar
            title="lrl-virtual-list"
            :autoBack="true"
            border
            placeholder
        >
            <template v-slot:right>
                <view @click="consoleInfo">console</view>
            </template>
        </u-navbar>
		<view class="tips">
			<u-text text="F12在控制台查看列表dom变化" type="error"></u-text>
			<u-text text="简单的固定每项高度的虚拟列表几行代码就可以完成，这种每项高度不固定，自动计算高度，并且支持触底加载、下拉刷新，删除、插入、修改每项功能的虚拟列表比较复杂，暂时是个半成品，网页端暂时可以使用预览" type="info"></u-text>
			<view class="list-desc">
				<u-text :text="'length: ' + list.length" type="error"></u-text>
				<u-button size="mini" type="success" @click="appendMaxData()">添加1万条数据</u-button>
			</view>
		</view>
        <lrl-virtual-list
            ref="list"
            class="list"
            :list="list"
            :refresherEnabled="true"
            :refresher-triggered="refresherTriggered"
           
            @refresherrefresh="onRefresherrefresh"
        >
            <template v-slot:default="{itemData, index}">
                <view class="news" @click="handlerItem(index)">
                    <text class="no">{{ index }}</text>
                    <text class="content">{{ itemData.text }}</text>
                </view>
            </template>
        </lrl-virtual-list>
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                refresherTriggered: false
            };
        },
        onLoad() {
            
        },
        onReady() {
           this.$refs.list.initListOrign(this.list) 
           
           // setTimeout(() => {
               this.pushList()
               this.pushList()
           // }, 1000)
        },
        methods: {
            consoleInfo(){
                this.$refs.list.consoleInfo()
            },
            pushList(){
                let indexStart = this.list.length 
                let re = Math.floor(Math.random(0, 1) * 10)
                this.list.push(...((re % 2 ? addData : addData2).map( (text, i) => { 
                    return { 
                        text: `，实际索引：${indexStart + i}。${text}`
                    } 
                    
                } )))
            },
            onRefresherrefresh(){
                this.refresherTriggered = true
                setTimeout(() => {
                    console.log('关闭下拉刷新')
                    this.refresherTriggered = false
                    this.list.splice(0, this.list.length)
                    setTimeout(() => {
						this.pushList()
						uni.showToast({
						    title: 'push',
						    icon: 'none'
						})
					}, 100) 
					
                },1500)
            },
            handlerItem(index){
                uni.showModal({
                    title: '操作',
                    content: '更改文字，自动监听属性变化高度',
                    cancelText: '删除',
                    confirmText: '更改文字',
                    
                    success:(res) => {
                        if(res.confirm){
                            /**
                             * 数据对象属性改变自动检测变化，会重新测量 cell 高度
                             * ！使用this.list[index] = '' 是不会触发响应式的，所以一般情况下都请使用 splice 进行更改数据
                             */
                            // this.list[index].text = '改变后'
                            this.list.splice(index, 1, {text:'改变后'})
                        }else {
                            this.list.splice(index, 1)
                        }
                    }
                })
            },
			appendMaxData(){
				let i = 0
				while(i <= 100){
					this.pushList()
					i++
				}
			}
        }
    }
    var addData = [
        'uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。',
        '一套代码编到14个平台，这不是梦想。眼见为实，扫描14个二维码，亲自体验最全面的跨平台效果！',
        'uni，读 you ni，是统一的意思。很多人以为小程序是微信先推出的，其实，DCloud才是这个行业的开创者。DCloud于2012年开始研发小程序技术，优化webview的功能和性能，并加入W3C和HTML5中国产业联盟，推出了HBuilder开发工具，为后续产业化做准备。2015年，DCloud正式商用了自己的小程序，产品名为“流应用”，它不是B/S模式的轻应用，而是能接近原生功能、性能的App，并且即点即用，第一次使用时可以做到边下载边使用。为将该技术发扬光大，DCloud将技术标准捐献给工信部旗下的HTML5中国产业联盟 (opens new window)，并推进各家流量巨头接入该标准，开展小程序业务。360手机助手率先接入，在其3.4版本实现应用的秒开运行。',
        '随后DCloud推动大众点评、携程、京东、有道词典、唯品会等众多开发者为流应用平台提供应用。',
        '在2015年9月，DCloud推进微信团队开展小程序业务，演示了流应用的秒开应用、扫码获取应用、分享链接获取应用等众多场景案例，以及分享了webview体验优化的经验。',
        '微信团队经过分析，于2016年初决定上线小程序业务，但其没有接入联盟标准，而是订制了自己的标准。DCloud持续在业内普及小程序理念，推进各大流量巨头，包括手机厂商，陆续上线类似小程序/快应用等业务。部分公司接入了联盟标准，但更多公司因利益纷争严重，标准难以统一。',
        '技术是纯粹的，不应该因为商业利益而分裂。开发者面对如此多的私有标准不是一件正确的事情。',
        '造成混乱的局面非DCloud所愿。于是我们决定开发一个免费开源的框架。',
        '既然各巨头无法在标准上达成一致，那么就通过这个框架为开发者抹平各平台差异。',
        '这，就是uni-app的由来。',
        '因为多年积累，所以DCloud拥有800多万开发者，并不意外，因为DCloud一直都有小程序的iOS、Android引擎，所以uni-app的App端和小程序端保持高度一致，并不意外，因为DCloud在引擎上的持续投入，所以uni-app的App端功能、性能比大多数小程序引擎都优秀，并不意外，因为DCloud对各家小程序太了解了，所以做好抹平各端差异的跨端框架，并不意外',
        '世界兜兜转转，当你踏出第一步时，随后很多事不会按你的预期发展。但只要你不忘初心，你想要的那个目标，最终会换个方式实现',
        'DCloud的初心是什么？为开发者提供免费、高效的开发工具，让天下没有难做的应用，改进应用形态，让用户更方便的获取数字服务',
        'DCloud也再次承诺不会对uni-app、HBuilderX等工具收费，感谢数百万开发者的一路陪伴，也请一直监督我们不忘初心！'
        
    ]
    var addData2 = [
        'vue，渐进式JavaScript 框架',
        'Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。',
        'Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统',
        'Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。',
        '当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。'
    ]
</script>

<style lang="scss">
    .list{
        height: 1300rpx;
        border: 1px solid blue;
        margin-top: 20rpx;
    }
    .news{
        display: block;
        background-color: antiquewhite;
        padding: 20rpx;
        
        margin-top: 20rpx;
    }
    .no{
        color: red;
    }
    .no,
    .content{
        font-size: 34rpx;
    }
	
	.tips{
		padding: 20rpx;
	}
	
	.list-desc{
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		>:nth-child(2){
			width: max-content;
		}
	}
</style>
